<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SignlinkCMS: User Manual</title>
<link rel="stylesheet" type="text/css" href="usermanual.css" />
</head>

<body>
<a name="top"></a>
<div id="layout">
<a href="usermanual.html"><img src="Images/User/usermanualtitle.png" border="0" alt="SignlinkCMS: User Manual" /></a>
</div>
<div id="navigation">
<ul class="nobullets">
<li><a href="http://www.signlinkstudio.com/" target="_blank">http://www.signlinkstudio.com/</a></li>
<li><a href="http://www.signlinkstudio.com/Canadian_Deaf_Academics_SignlinkCMS/" target="_blank">http://www.signlinkstudio.com/Canadian_Deaf_Academics_SignlinkCMS/</a></li>
</ul>
 <ul class="nobullets">
      <li><h4><i>Version 1.0 - Please note this file is currently undergoing revisions as of May 25th, 2009<br />Signed Web Page Content will be available shortly</i></h4></li>
   </ul>
<img src="Images/Admin/adminmanualcon.png" alt="Contents" />
</div>
<div id="text">
	<ol>
      <li><a href="#intro">Introduction</a></li>
	  <li class="lispace"><a href="#using">Using SignlinkCMS</a>
        <ul class="nobullets">
          <li class="lispace">2.1 <a href="#system">System Requirements</a></li>
          <li>2.2 <a href="#start">Getting Started</a></li>
          <li>2.3 <a href="#navbar">The Navigation Bar</a></li>
          <li>2.4 <a href="#login">The Login Area</a></li>
          <li>2.5 <a href="#content">The Content Area</a></li>
        </ul>
   	  </li>
      <li class="lispace"><a href="#signed">Signed Web Pages</a></li>
      <li class="lispace"><a href="#ack">Acknowledgements</a></li>
	</ol>
</div>
<div id="contents">
<img src="Images/linebreak.png" alt="Line break" border="0" />
<br />
<br /><a name="intro"><img src="Images/User/usermanualintro.png" alt="Introduction" /></a>
<p>
SignlinkCMS is an on-line content management system developed specifically for users of sign languages (e.g., American Sign Language - ASL, Langue des signes québécoise -LSQ, British Sign Language - BSL).
</p>
<p>SignlinkCMS supports sign language-based web pages that are produced by Signlink Studio v2.0 (a free authoring tool that is available from <a href="http://www.signlinkstudio.com/" target="_blank">www.signlinkstudio.com</a>), videos, images and text.
</p>
<p>In SignlinkCMS, icons and other visual cues are used to convey information to the website members instead of using text. This creates an immersive sign language based experience for website members.
</p>
<p>SignlinkCMS features the ability to create and manage pages, forums and vlogs (short for video blogging).
</p>
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a><br />
<br /><br /><br /><img src="Images/linebreak.png" alt="Line break" border="0" />
<br />
<br /><a name="using"><img src="Images/User/usermanualusing.png" alt="Using SignlinkCMS" /></a>
<br /><h1>2.1. <a name="system"></a>System Requirements</h1>
<br /><b>Web browser:</b>
<ul>
<li>Internet Explorer, version 6.0+</li>
<li>FireFox, version 3.0+</li>
</ul>
<br /><b>Quicktime player:</b>
<ul>
<li>Quicktime plugin</li>
</ul>
<br /><b>Flash player</b>
<ul>
<li>Flash plugin</li>
</ul>
<br />
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a>
<h1>2.2. <a name="start"></a>Getting Started</h1>
SignlinkCMS is a web application that allows sign language users to participate in and view online web pages, discussions and blogs using sign language instead of text. 
<p>
You can use SignlinkCMS by entering a web address (e.g. <a href="http://www.signlinkstudio.com/Canadian_Deaf_Academics_SignlinkCMS/" target="_blank">http://www.signlinkstudio.com/Canadian_Deaf_Academics_SignlinkCMS/</a>) into your browser. If you are not sure of the web address, please contact your SignlinkCMS administrator. 
</p>
<p>
When you go to the SignlinkCMS home page, you will probably see something similar to the web page shown in <b>Figure 1</b>. The home page consists of several parts: a navigation bar, the login area and the content area. The content area usually consists of three sections: pages, forums and vlogs.
</p>
<h3>Figure 1: SignlinkCMS home page</h3>
<a href="Images/Screenshots/User/Fig1.png" target="_blank"><img src="Images/Screenshots/User/Fig1.png" width="469" height="504" class="imgBordered" alt="Figure 1: SignlinkCMS home page" /></a>

<br /><h2>2.2.1. Viewing web pages in SignlinkCMS</h2>
You can view web pages in SignlinkCMS by clicking on the blue bars. For instance, to view a forum, click the blue bar below the forum title (<b>Figure 2</b>). Note that unlike on a traditional text-based web site, titles can be video, images or text. 
<p>
When you click on the blue bar you are taken to another web page where you can view more pages by clicking on more blue bars. Some pages will contain only images and text, but many will contain videos or signing web pages. Take a moment to familiarize yourself with SignlinkCMS by clicking on some blue bars and viewing some web pages. You can return to the home page by clicking the home icon (see <b>2.3.1</b>).
</p>
<h3>Figure 2: View web pages by clicking on the blue bar</h3>
<a href="Images/Screenshots/User/Fig2.png" target="_blank"><img src="Images/Screenshots/User/Fig2.png" width="188" height="217" class="imgBordered" alt="Figure 2: View web pages by clicking on the blue bar" /></a>
<p>As noted above, SignlinkCMS allows you to view <b>signed web pages</b>. These are web pages created by using a web page editor called Signlink Studio (available at <a href="http://www.signlinkstudio/" target="_blank">www.signlinkstudio.com/</a>). You can find out more about viewing signed web pages in <a href="#signed">section 3</a> of this manual.
</p>
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a>

<br /><h1><a name="navbar"></a>2.3. The Navigation Bar</h1>
The home page of SignlinkCMS contains a navigation bar (<b>Figure 3</b>) using visual cues such as icons, that allows you to quickly access the various areas of the site. 
<h3>Figure 3: Navigation bar</h3>
<a href="Images/Screenshots/User/Fignavbar.png" target="_blank"><img src="Images/Screenshots/User/Fignavbar.png" width="492" height="51" class="imgBordered" alt="Figure 3: Navigation bar" /></a>
<br /><h2>2.3.1. Home</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarhome.png" border="0" alt="Figure 3: Navigation bar - Home" />
<br />This is the first page that you will see when you arrive at a SignlinkCMS site (see <b>Figure 1</b>). The home page includes links to pages, forums and vlogs as well as a login area. The home page also includes a content section that shows a selection of pages, forums and vlogs to demonstrate what is available on the site.
</p>
<br /><h2>2.3.2. Content Pages</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarcontent.png" border="0" alt="Figure 3: Navigation bar - Content pages" />
<br />The “pages” section of the website contains web pages that have been added by the web site administrator. Pages may include information such as a welcome page, instructions for new members, etc. For more information see section <b>2.5.1</b>.
</p>
<br /><h2>2.3.3. Forums</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarforums.png" border="0" alt="Figure 3: Navigation bar - Forums" />
<br />The Forums section of the web site allows you to visit and participate in the various forums on the system. For more information see section <b>2.5.2.</b>.
</p>
<br /><h2>2.3.4. Vlogs</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarvlogs.png" border="0" alt="Figure 3: Navigation bar - Vlogs" />
<br />The Vlogs section allows you to visit the various vlogs on the web site. For more information see section <b>2.5.3.</b>.
</p>
<br /><h2>2.3.5. Help</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarhelp.png" border="0" alt="Figure 3: Navigation bar - Help" />
<br />Click on help to view this manual online (available in sign language and in text).
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a>
</p>
<br />
<h1>2.4. <a name="login"></a>The Login Area</h1>
<p>
Figure 4 shows the login area. It is not necessary to log in to view the web site, but you need to log in if you want to post in forums, reply to messages or make comments and to start your own vlog.
</p>
<br /><h2>2.4.1. Registering</h2>
<p>
You must register on the site to log in. To register, select “register” in the login area (<b>Figure 4</b>).
</p>
<h3>Figure 4: The login area</h3>
<p>
<a href="Images/Screenshots/User/Fig4.png" target="_blank"><img src="Images/Screenshots/User/Fig4.png" width="249" height="102" class="imgBordered" alt="Figure 4: The login area" /></a>
</p>
<p>
The registration page (<b>Figure 5</b>) collects your name and email address (this is needed in case you forget your password) and lets you set your login name and password. The password you choose must be greater than eight characters and use a combination of letters and numbers. You must also choose a unique login name and email address.
</p>
<h3>Figure 5: The registration page</h3>
<a href="Images/Screenshots/User/Fig5a.png" target="_blank"><img src="Images/Screenshots/User/Fig5a.png" width="241" height="395" class="imgBordered" alt="Figure 5: The registration page" /></a>
<p>
Once you have registered and logged in, the login area will change to show your login name and a blank avatar picture (<b>Figure 6</b>). Two icons will also appear: a “preferences” icon and a “log out” icon.
</p>
<h3>Figure 6: The login area after logging in</h3>
<a href="Images/Screenshots/User/Fig6.png" target="_blank"><img src="Images/Screenshots/User/Fig6.png" width="239" height="87" class="imgBordered" alt="Figure 6: The login area after logging in" /></a>
<p>Below the “new forum” link, you will see a list of the forums on your site. Each forum listing shows the forum title, the number of topics in the forum, the number of posts in the forum, the date and time of the last post and links to “posts”, “edit” and “delete”.
</p>
<br /><h2>2.4.2. Preferences</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarpref.png" border="0" alt="Figure 3: Navigation bar - Preferences" />
<br />To edit your account, select the “preferences” icon in the login area.
</p>
<p>This will display a screen that lets you change your name, your email, and your avatar image (<b>Figure 7</b>). Press “Submit” to save your changes. 
</p>
<h3>Figure 7: Preferences</h3>
<a href="Images/Screenshots/User/Fig7.png" target="_blank"><img src="Images/Screenshots/User/Fig7.png" width="459" height="379" class="imgBordered" alt="Figure 7: Preferences" /></a>
<p>
Once you have set your avatar image, the login area will include that image (<b>Figure 8</b>).
</p>
<h3>Figure 8: The login area with an avatar image</h3>
<a href="Images/Screenshots/User/Fig8.png" target="_blank"><img src="Images/Screenshots/User/Fig8.png" width="240" height="86" class="imgBordered" alt="Figure 8: The login area with an avatar" /></a>
<br /><h2>2.4.3. Logging out</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarlogout.png" border="0" alt="Figure 3: Navigation bar - Logout" />
<br />Click the log out icon to log out of the website.
</p>
<br /><h2>2.4.4. Password reminder</h2>
<p>
Enter your email address and your login details will be emailed to you. 
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a>
</p>
<br /><h1><a name="content"></a>2.5. The Content Area</h1>
Navigating through the web site pages, forums and vlogs is briefly described in section 2.2 and is described more fully in section 2.5.2. Before proceeding, you may also wish to read about how to use signed web pages in section 3.
<h2>2.5.1. Pages</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarcontent.png" border="0" alt="Figure 3: Navigation bar - Content pages" />
<br />The web site administrator creates pages for members to view. For example, the administrator might use a page to welcome people to SignlinkCMS or to explain the procedure for applying for a vlogging account. 
</p>
<h2>2.5.2. Forums</h2>
<p>
<img src="Images/Screenshots/User/Fignavbarforums.png" border="0" alt="Figure 3: Navigation bar - Forums" />
<br />A forum is an online discussion. The SignlinkCMS web site administrator is the only one who can create forums but everyone can view forum discussions. If you log in you can also create new discussion topics and submit new posts. 
</p>
<p>
When you click the forum icon in the navigation bar you will see one or more forum boxes. Each forum box (<b>Figure 9</b>) displays a title (i.e., the video, image or text). At the bottom left of the forum box is an envelope icon that indicates new messages (<img src="Images/Screenshots/User/Figred.png" border="0" alt="Red icon" /> red icon) and viewed messages (<img src="Images/Screenshots/User/Figblue.png" border="0" alt="Blue icon" /> blue icon). In addition, you can see how many posts and topics are in the forum.
</p>
<h3>Figure 9: A forum box</h3>
<a href="Images/Screenshots/User/Fig9.png" target="_blank"><img src="Images/Screenshots/User/Fig9.png" width="181" height="225" class="imgBordered" alt="Figure 9: A forum box" /></a>
<br />
<p>
<u><b>Entering a forum</b></u>
<br /><br />To enter a forum, click on the blue bar that appears below the forum title (i.e., the video, image or text). When you enter the forum you will see the title of the forum at the top, and below that a series of topic boxes, showing the topics in the forum (<b>Figure 10</b>).
</p> 
<h3>Figure 10: List of topics in a forum</h3>
<a href="Images/Screenshots/User/Fig10a.png" target="_blank"><img src="Images/Screenshots/User/Fig10a.png" width="452" height="323" class="imgBordered" alt="Figure 10: List of topics in a forum" /></a>
<br />
<p>
<u><b>Viewing a topic and message</b></u>
<br /><br />Each topic box (<b>Figure 11</b>) shows the topic title. Below the blue bar several other pieces of information are displayed:
</p>
<ul>
<li>1: An envelope icon that indicates if there are new messages (red icon) or viewed messages (blue icon).</li>
<li>2: The number of replies <img src="Images/Screenshots/User/Fignavreplies.png" border="0" alt="Navigation - Replies" /></li>
<li>3: The number of views <img src="Images/Screenshots/User/Fignavviews.png" border="0" alt="Navigation - Views" /></li>
<li>4: The time and date of the last message.</li>
</ul> 
<h3>Figure 11: A topic box</h3>
<a href="Images/Screenshots/User/Fig11.png" target="_blank"><img src="Images/Screenshots/User/Fig11.png" width="545" height="473" class="imgBordered" alt="Figure 11: A topic box"/></a>
<br />
<p>
To view a topic, click on the blue bar. The web page for the topic (Figure 12) lists the forum title. To the far right of the forum title is an arrow icon allows you to return the forum page <img src="Images/Screenshots/User/Fignavbarback.png" border="0" alt="Figure 3: Navigation bar - Back" />
</p>
<p>
Below the forum title is the topic title and post. Note that just like titles, a forum post can be a signed web page, a video message or a text message. Below the topic post is a list of replies to the post.
</p>
<h3>Figure 11b: Signed web page, video message or a text message</h3>
<a href="Images/Screenshots/User/Fig11b.png" target="_blank"><img src="Images/Screenshots/User/Fig11b.png" width="563" height="303" class="imgBordered" alt="Figure 11b: Signed web page, video message or a text message" /></a>
<br /><br />
<h3>Figure 12: A forum post and replies</h3>
<a href="Images/Screenshots/User/Fig12.png" target="_blank"><img src="Images/Screenshots/User/Fig12.png" width="519" height="409" class="imgBordered" alt="Figure 12: A forum post and replies" /></a>
<p>
<u><b>Viewing a topic and message</b></u>
<br />Each reply consists of four elements:
</p>
<ul>
<li>1: The envelope icon indicates a new message (red icon) or viewed message (blue icon).</li>
<li>2: The reply icon which can be clicked to view the reply. The icon indicates if the reply is a signed web page <img src="Images/Screenshots/User/Fignavweb.png" border="0" alt="Navigation - Web Page" />, a video <img src="Images/Screenshots/User/Fignavvideo.png" border="0" alt="Navigation - Video" />, or plain text.</li>
<li>3: The login name of the author.</li>
<li>4: The date and time of the reply.</li>
</ul> 
<p>
<u><b>Starting a new topic</b></u>
To start a new topic, select the “new topic” button <img src="Images/Screenshots/User/Fignavnew.png" border="0" alt="Navigation - Video" /> on the far right of the main forum page (<b>Figure 13</b>).
</p>
<h3>Figure 13: The new topic icon on the far right</h3>
<a href="Images/Screenshots/User/Fig13.png" target="_blank"><img src="Images/Screenshots/User/Fig13.png" width="503" height="124" class="imgBordered" alt="Figure 13: The new topic icon on the far right" /></a>
<p>
Doing this will take you to a new page where you will specify a subject and a message to begin the new topic (<b>Figure 14</b>). 
</p>
<h3>Figure 14: Creating a new forum topic</h3>
<a href="Images/Screenshots/User/Fig14.png" target="_blank"><img src="Images/Screenshots/User/Fig14.png" width="536" height="268" class="imgBordered" alt="Figure 14: Creating a new forum topic" /></a>
<p>
For the subject, choose an image, a video or text. For the message, choose between a signed web page (requires a swf file and an mp4 file), a video or text. Once you have decided what content types to use, you will be prompted for their locations on your computer. Enter “alt text” to have text appear when members hover over your image or video. Choose submit to finish creating the topic page (<b>Figure 15</b>).
</p>
<h3>Figure 15: Choosing content types</h3>
<a href="Images/Screenshots/User/Fig15.png" target="_blank"><img src="Images/Screenshots/User/Fig15.png" width="575" height="400" class="imgBordered" alt="Figure 15: Choosing content types" /></a>
<p>
For more information on creating signed web pages see <a href="http://www.signlinkstudio.com" target="_blank">www.signlinkstudio.com</a>.
</p>
<p>
<u><b>Replying to a post</b></u>
<br /><br />Replying to a post is very similar to creating a new topic, except a subject is not required. <img src="Images/Screenshots/User/Fignavreply.png" border="0" alt="Navigation - Reply to topic" /> and select the reply content type as before (<b>Figure 16</b>). Once you have specified your reply, press “submit”.
</p>
<h3>Figure 16: The reply button</h3>
<a href="Images/Screenshots/User/Fig16.png" target="_blank"><img src="Images/Screenshots/User/Fig16.png" width="566" height="62" class="imgBordered" alt="Figure 16: The reply button" /></a>
<br /><br />
<h3>Figure 17: Replying to a post</h3>
<a href="Images/Screenshots/User/Fig17.png" target="_blank"><img src="Images/Screenshots/User/Fig17.png" width="584" height="378" class="imgBordered" alt="Figure 17: Replying to a post" /></a>
<p>
<u><b>Editing a post</b></u>
<br /><br />Editing a post is similar to creating a post and replying to a post. When you are logged in and viewing a post which you submitted, you will see an edit button <img src="Images/Screenshots/User/Fignavedit.png" border="0" alt="Navigation - Edit" /> on the far right. Clicking this button will allow you to change your post.
</p>
<h3>Figure 18: Click the edit button on the far left to edit your post</h3>
<a href="Images/Screenshots/User/Fig18.png" target="_blank"><img src="Images/Screenshots/User/Fig18.png" width="511" height="403" class="imgBordered" alt="Figure 18: Click the edit button on the far left to edit your post" /></a>
<h2>2.5.3. Vlogs</h2>
<p>
The vlogs is an area in which only members who have been specifically provided with a vlog by the administrator can post entries. Other members may comment on those entries.
</p>
<p>
In all other respects, the vlogs work the same way as the forums.
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a><br />
</p>
<br /><br /><img src="Images/linebreak.png" alt="Line break" border="0" />
<br /><a name="using"><img src="Images/User/usermanualsigned.png" alt="Using SignlinkCMS" /></a>
<p>
Signed web pages are specially designed web pages for sign language users. They allow you to post and view material on the internet entirely in sign language or in sign language with captions and/or text. To create a signed web page, you need to use Signlink Studio, a web page editor available at <a href="http://www.signlinkstudio.com" target="_blank">www.signlinkstudio.com</a>.
</p>
<p>
Using the Signlink technique, videos of people signing can be linked to any other information on the web. You can see an example in <b>Figure 19</b>.
</p>
<h3>Figure 19: A signed web page</h3>
<a href="Images/Screenshots/User/Fig19.png" target="_blank"><img src="Images/Screenshots/User/Fig19.png" class="imgBordered" alt="Figure 19: A signed web page" /></a>
<p>
A signed web page is built around a video of a person signing. When the signer identifies a concept that the web page author has linked to another web page, a signlink appears. Signlinks are similar to text hyperlinks on a text web page – you can click on a link to go to somewhere else on the web. A signlink is identified by a red outline around the video. On a signed web page, several features supplement the video:
</p>
<h3>Figure 19b: Link Timeline</h3>
<a href="Images/Screenshots/User/Fig19b.png" target="_blank"><img src="Images/Screenshots/User/Fig19b.png" class="imgBordered" alt="Figure 19b: Link Timeline" /></a>
<p>
The link timeline lets you quickly see the number and location of signlinks in the video. A link is highlighted when its signlink plays in the video. Clicking on any of the blue links plays the video from the start of that signlink.
</p>
<h3>Figure 19c: Thumbnail Images</h3>
<a href="Images/Screenshots/User/Fig19c.png" target="_blank"><img src="Images/Screenshots/User/Fig19c.png" class="imgBordered" alt="Figure 19c: Thumbnails" /></a>
<p>
Each thumbnail image is an image captured from within a different signlink. The thumbnail image is highlighted when its signlink plays in the video. Clicking on the image plays the video from the start of the signlink. When you want to follow a signlink, select the blue bar that appears below the thumbnail image.
</p>
<h3>Figure 19d: Next and previous link buttons</h3>
<a href="Images/Screenshots/User/Fig19d.png" target="_blank"><img src="Images/Screenshots/User/Fig19d.png" class="imgBordered" alt="Figure 19d: Next and previous link buttons" /></a>
<p>
These buttons allow you to jump to the next and previous signlinks in the video.
</p>
<h3>Figure 19e: Slow mode button</h3>
<a href="Images/Screenshots/User/Fig19e.png" target="_blank"><img src="Images/Screenshots/User/Fig19e.png" class="imgBordered" alt="Figure 19e: Slow mode button" /></a>
<p>
This button toggles the slow speed mode. This can be useful when a signer is finger spelling quickly.
</p>
<p>
After using Signlink Studio to create a signed web page for use in SignlinkCMS, you must “export” your web page. This creates an export directory containing the two signed web page files, a video file (mp4) and a Flash file (swf) which you can upload to SignlinkCMS.
</p>
<a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a><br />
<br /><br /><img src="Images/linebreak.png" alt="Line break" border="0" />
<br />
<br /><a name="ack"><img src="Images/User/usermanualack.png" alt="Acknowledgements" /></a>
<br />
<br />The lead programmer for the SignlinkCMS was:
<ul>
<li>Heidi Hazelton</li>
</ul>
The other Signlink Project Team members are:
<ul>
<li>Deb Fels</li>
<li>Martin Gerdzhev</li>
<li>James Hardman</li>
<li>Ellen Hibbard</li>
<li>Jan Richards</li>
<li>Laurel Williams</li>
</ul>
The development of the SignlinkCMS has been generously supported by the Canadian Content Online Program of Canadian Heritage (<a href="http://www.pch.gc.ca">www.pch.gc.ca</a>).
<br /><a href="#top"><img src="Images/top.png" align="right" border="0" alt="Back to top" /></a><br />
<br /><br /><br /><img src="Images/linebreak.png" alt="Line break" border="0" />
<br />
<br />
<br />
</div>
</body>
</html>
